import React, { MutableRefObject, useRef } from 'react';
import { BsFillArrowLeftCircleFill, BsFillArrowRightCircleFill } from 'react-icons/bs';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import dayjs from 'dayjs';
import { useAppSelector } from '../../store/hook';

import ContentWrapper from '../ContentWrapper';
import Img from '../LazyLoadImg';
import PosterFallback from '../../assets/no-poster.png';
import CircleRating from '../CircleRating';
import Genres from '../Genres';

import './index.scss';

const Carousel: React.FC<any> = ({ data, loading, endpoint, title }) => {
  const carouselContainer = useRef<any>();
  const { url } = useAppSelector(state => state.home);
  const navigate = useNavigate();

  const navigation = (direction: string) => {
    const container = carouselContainer.current;

    const scrollAmount =
      direction === 'left'
        ? container.scrollLeft - (container.offsetWidth + 20)
        : container.scrollLeft + (container.offsetWidth + 20);

    container.scrollTo({
      left: scrollAmount,
      behavior: 'smooth',
    });
  };

  const skItem = () => {
    return (
      <div className="skeleton-item">
        <div className="poster-block skeleton"></div>
        <div className="text-block">
          <div className="title skeleton"></div>
          <div className="date skeleton"></div>
        </div>
      </div>
    );
  };

  return (
    <div className="carousel">
      <ContentWrapper>
        {title && <div className="carousel-title">{title}</div>}
        <BsFillArrowLeftCircleFill
          onClick={() => navigation('left')}
          className="carousel-left-nav arrow"
        ></BsFillArrowLeftCircleFill>
        <BsFillArrowRightCircleFill
          onClick={() => navigation('right')}
          className="carousel-right-nav arrow"
        ></BsFillArrowRightCircleFill>
        {!loading ? (
          <div className="carousel-items" ref={carouselContainer}>
            {data?.map((item: any) => {
              const posterUrl = item.poster_path ? url.poster + item.poster_path : PosterFallback;
              return (
                <div
                  className="carousel-item"
                  key={item.id}
                  onClick={() => navigate(`/${item.media_type || endpoint}/${item.id}`)}
                >
                  <div className="poster-block">
                    <Img src={posterUrl}></Img>
                    <CircleRating rating={item.vote_average.toFixed(1)}></CircleRating>
                    <Genres data={item.genre_ids} />
                  </div>
                  <div className="text-block">
                    <span className="title">{item.title || item.name}</span>
                    <span className="date">{dayjs(item.release_Date).format('YYYY-MM-DD')}</span>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="loading-skeleton">
            {skItem()}
            {skItem()}
            {skItem()}
            {skItem()}
            {skItem()}
          </div>
        )}
      </ContentWrapper>
    </div>
  );
};

export default Carousel;
